<template>
  <el-container v-if="finish">
    <div class="page-main-body-box">
      <div class="meedu-main-body">
        <div class="float-left j-b-flex mb-30">
          <div class="d-flex">
            <el-button type="primary" size="default" @click="go('/order/refund')">
              退款订单
            </el-button>
          </div>
          <div class="d-flex">
            <div class="ml-10">
              <el-input v-model="input" placeholder="订单编号"></el-input>
            </div>
            <div class="ml-10">
              <el-input v-model="input1" placeholder="商品关键字"></el-input>
            </div>
            <div class="ml-10">
              <el-select v-model="form.region" placeholder="请选择支付渠道">
                <el-option label="支付宝支付" value="alipay"></el-option>
                <el-option label="微信支付" value="wechat"></el-option>
                <el-option label="线下打款" value="handPay"></el-option>
              </el-select>
            </div>
            <div class="ml-10">
              <el-button @click="empty()">清空</el-button>
            </div>
            <div class="ml-10">
              <el-button type="primary" @click="screening()">筛选</el-button>
            </div>
            <div class="ml-10">
              <div class="drawerMore" @click="drawer = true">
                <img src="@/assets/img/icon-filter.png" alt="" />
                <span>更多</span>
              </div>
            </div>
          </div>
        </div>
        <div class="float-left">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="`全部(${total})`" name="0"> </el-tab-pane>
            <el-tab-pane :label="`已支付(${sizeData.countMap['9']})`" name="1"> </el-tab-pane>
            <el-tab-pane :label="`支付中(${sizeData.countMap['5']})`" name="2"></el-tab-pane>
            <el-tab-pane :label="`未支付(${sizeData.countMap['1']})`" name="3"></el-tab-pane>
            <el-tab-pane :label="`已取消(${sizeData.countMap['7']})`" name="4"></el-tab-pane>
          </el-tabs>
        </div>
        <el-table :data="tableList" v-loading="loading" :border="false" style="width: 100%" @sort-change="sort">
          <el-table-column fixed prop="id" label="ID" width="100" sortable="custom">
          </el-table-column>
          <el-table-column prop="name" label="学员" width="200">
            <template slot-scope="scope">
              <img :src="users[tableList[scope.$index].user_id].avatar" alt="" style="
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  margin-right: 8px;
                  float: left;
                " />
              <div style="float: left; line-height: 40px">
                {{ users[tableList[scope.$index].user_id].nick_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="goods[0].goods_name" label="商品名称" width="250"></el-table-column>
          <el-table-column label="支付金额" width="200">
            <template slot-scope="scope">
              {{ "¥" + tableList[scope.$index].charge }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="支付渠道" width="120">
            <template slot-scope="scope">
              <div class="item-img" v-if="tableList[scope.$index].payment_text == '手动打款'">
                <img src="@/assets/img/card.png" alt="" />
              </div>
              <div class="item-img" v-else-if="tableList[scope.$index].payment_text == '微信支付'">
                <img src="@/assets/img/wepay.png" alt="" />
              </div>
              <div class="item-img" v-else-if="tableList[scope.$index].payment_text == '支付宝支付'">
                <img src="@/assets/img/ali-pay.png" alt="" />
              </div>
              <div class="item-img" v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="status_text" label="支付状态" width="120">
            <template slot-scope="scope">
              <div class="status" style="color: red" v-if="tableList[scope.$index].status_text === '未支付'">
                · {{ tableList[scope.$index].status_text }}
              </div>
              <div class="status" style="color: #e1a500" v-else-if="tableList[scope.$index].status_text === '支付中'">
                · {{ tableList[scope.$index].status_text }}
              </div>
              <div class="status" style="color: #04c877" v-else-if="tableList[scope.$index].status_text === '已支付'">
                · {{ tableList[scope.$index].status_text }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tui" label="退款" width="100">--</el-table-column>
          <el-table-column prop="updated_at" label="订单创建时间" width="200">
            <template slot-scope="scope">
              <div>
                {{ new Date(tableList[scope.$index].updated_at).toLocaleString() }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click="go('/order/looktext', tableList[scope.$index].id)" type="text" size="small"
                style="font-size: 14px">查看
              </el-button>
              <el-button type="text" size="small" style="font-size: 14px">
                <el-dropdown>
                  <span class="el-dropdown-link" style="color: #66b1fe">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-button @click="dialogVisible = true" v-if="tableList[scope.$index].status_text === '已支付'">退款
                    </el-button>
                    <el-button v-else style="cursor: not-allowed">退款</el-button>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="float-left text-center mt-30">
          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="orders.total" @current-change="getCurPageData"
            @size-change="getCurPageSizeData">
          </el-pagination>
        </div>
        <el-drawer title="更多筛选" :visible.sync="drawer" :with-header="false" modal size="23%">
          <div class="d-flex">
            <div class="n-padding-box">
              <div class="mb-30">
                <span>更多筛选!</span>
              </div>
              <div class="mb-30">
                <el-input v-model="input" placeholder="订单编号" style="width: 290px"></el-input>
              </div>
              <div class="mb-30">
                <el-input v-model="input1" placeholder="商品关键字" style="width: 290px"></el-input>
              </div>
              <div class="mb-30">
                <el-select v-model="form.region" placeholder="请选择支付渠道" style="width: 290px">
                  <el-option label="支付宝支付" value="alipay"></el-option>
                  <el-option label="微信支付" value="wechat"></el-option>
                  <el-option label="线下打款" value="handPay"></el-option>
                </el-select>
              </div>
              <div class="mb-30">
                <el-select v-model="Newform.region" placeholder="是否有退款记录" style="width: 290px">
                  <el-option label="有退款" value="1"></el-option>
                  <el-option label="无退款" value="-1"></el-option>
                </el-select>
              </div>
              <div class="mb-30">
                <el-date-picker v-model="valueMode" type="daterange" range-separator=   "至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
              <div class="mb-30 fl">
                <el-button @click="empty()">清空</el-button>
              </div>
              <div class="mb-30 fr">
                <el-button type="primary" @click="getNowScreening()">筛选</el-button>
              </div>
            </div>
          </div>
        </el-drawer>

        <el-dialog title="退款" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <el-form ref="form" :model="form2" label-width="100px">
            <el-form-item label="退款方式:">
              <el-select v-model="form2.region" placeholder="请选择退款方式">
                <el-option label="原渠道返回" value="0"></el-option>
                <el-option label="线下退回(退款记录)" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="退款金额:">
              <el-input v-model="inputValue" placeholder="请输入退款金额" type="number">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="退款理由">
              <el-input type="textarea" placeholder="请输入退款内容" v-model="textarea" maxlength="60" show-word-limit
                resize="none">
              </el-input>
            </el-form-item>
            <div style="display: flex; justify-content: right">
              <el-button type="primary" @click="gotoRefund()">确认</el-button>
            </div>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </el-container>
</template>

<script>
import { getOrders, getref } from "@/network/order";
import { Message } from "element-ui";
export default {
  data() {
    return {
      daterange: "",
      finish: false,
      dialogVisible: false,
      input: "",
      input1: "",
      totalPage: "",
      form: {
        region: "",
      },
      textarea: "",
      text: "",
      form2: { region: "" },
      valueMode: "",
      Newform: {
        region: "",
      },
      inputValue: 0,
      drawer: false,
      sizeData: {
        countMap: {},
      },

      loading: true,
      activeName: 0,
      currentPage: 1,
      tableList: [],
      users: {},
      orders: {},
      params: {
        page: 1,
        size: 10,
        sort: "id",
        order: "desc",
        is_refund: -1,
      },

      Orden: {
        page: 1,
        size: 10,
        sort: "id",
        order: "desc",
        is_refund: -1,
        goods_name: "",
        status: 0,
        order_id: "",
        payment: "",
      },
      notes: {
        page: 1,
        size: 10,
        sort: "id",
        order: "desc",
        is_refund: -1,
        status: 0,
      },
      refes: {
        is_local: 0,
        amount: 0,
        reason: "",
      }
    };
  },
  computed: {
    total() {
      let num = 0;
      for (let attr in this.sizeData.countMap) {
        num += this.sizeData.countMap[attr];
      }
      return num;
    },
  },
  methods: {
    go(path, params) {
      this.$router.push({
        path,
        query: {
          id: params,
        },
      });
    },
    sort({ order }) {
      this.loading = true;
      if (!order || order === "descending") {
        this.params.order = "desc";
        this.numOrder();
      } else {
        this.params.order = "asc";
        this.numOrder();
      }
    },
    empty() {
      this.input = "";
      this.input1 = "";
      this.form.region = "";
      this.screening();
    },
    handleClick({ index }) {
      this.loading = true;
      if (index == 0) {
        this.params.status = 0;
        this.numOrder();
      } else if (index == 1) {
        this.params.status = 9;
        this.numOrder();
      } else if (index == 2) {
        this.params.status = 5;
        this.numOrder();
      } else if (index == 3) {
        this.params.status = 1;
        this.numOrder();
      } else if (index == 4) {
        this.params.status = 7;
        this.numOrder();
      }
    },
    numOrder() {
      getOrders(this.params).then((res) => {
        this.tableList = res.data.orders.data;
        this.users = res.data.users;
        this.orders = res.data.orders;
        this.loading = false;
        this.sizeData = res.data;
        this.finish = true;
      });
    },
    handle() { },
    getCurPageData(page) {
      this.loading = true;
      this.params.page = page;
      this.numOrder();
    },
    getCurPageSizeData(pageSize) {
      this.loading = true;
      this.params.size = pageSize;
      this.numOrder();
    },
    getScreening() {
      this.loading = true;
      this.screening();
    },
    gotoRefund() {
      this.refes.is_local = this.form2.region;

      this.refes.amount = this.inputValue
      this.refes.reason = this.textarea
      getref(this.refes).then(res => {
        Message.error(res.message)
        this.screening()
        this.dialogVisible = false
      })
    },
    getNowScreening() {
      this.loading = true;
      this.notes.order_id = this.input
      this.notes.goods_name = this.input1;
      this.notes.created_a = this.valueMode
      this.notes.is_refund = this.Newform.region
      this.notes.payment = this.form.region
      getOrders(this.notes).then(res => {
        this.tableList = res.data.orders.data;
        this.users = res.data.users;
        this.orders = res.data.orders;
        this.sizeData = res.data;
        this.loading = false;
      })
    },
    screening() {
      this.loading = true;
      this.Orden.payment = this.form.region;
      this.Orden.order_id = this.input;
      this.Orden.goods_name = this.input1;
      getOrders(this.Orden).then((res) => {
        this.tableList = res.data.orders.data;
        this.users = res.data.users;
        this.orders = res.data.orders;
        this.sizeData = res.data;
        this.loading = false;
      });
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
  },
  created() {
    this.numOrder();
  },
};
</script>

<style lang="scss" scoped>
.red {
  color: red;
}

.el-container {
  height: 100%;

  .page-main-body-box {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 5px 20px 20px;
    overflow-y: auto;
    background-color: #f1f2f9;

    .meedu-main-body {
      width: 100%;
      height: auto;
      float: left;
      background-color: #fff;
      box-sizing: border-box;
      padding: 30px;
      border-radius: 15px;
      margin-bottom: 90px;
      box-shadow: 0 2px 4px 0hsla (0, 0%, 40%, 0.05);
      min-width: 1180px;

      .float-left {
        width: 100%;
        height: auto;
        float: left;

        .d-flex {
          display: flex;
          align-items: center;

          .drawerMore {
            display: flex;
            align-items: center;
            height: 14px;
            font-size: 14px;
            font-weight: 400;
            color: #666;
            line-height: 14px;
            cursor: pointer;

            img {
              width: 14px;
              height: 14px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}

.j-b-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mb-30 {
  margin-bottom: 30px;
}

.ml-10 {
  margin-left: 10px;
}

.text-center {
  text-align: center;
}

.el-table thead {
  color: #909399;
  font-weight: 500;
}

::v-deep.el-table thead tr th {
  background-color: #f1f2f9;
  color: black;
}

.item-img img {
  width: 30px;
  height: 30px;
}

.n-padding-box {
  width: 100%;
  height: auto;
  float: left;
  padding: 30px;
}

.el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange {
  width: 250px;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

::v-deep.el-date-editor.el-range-separator {
  width: 0%;
}

.mt-30 {
  margin-top: 30px;
}
</style>
